<template>
  <div>
    <!-- 顶部 -->
    <div class="sidebar-top">
      <div>后台数据管理</div>
      <div @click="signOut">退出</div>
    </div>
    <div class="sidebar-cont">
      <el-menu :default-active="ac_index" @select="Select">
        <div v-for="(item,index) in menu" :key="index">
          <router-link :to="{path:item.router}">
            <el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </el-menu-item>
          </router-link>
          <!-- 二级，三级 -->
          <el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </template>
            <div v-for="(two,index_two) in item.Subclass" :key="index_two">
              <router-link :to="{path:two.router}">
                <el-menu-item :index="two.id">{{two.title}}</el-menu-item>
              </router-link>
            </div>
          </el-sub-menu>
        </div>
      </el-menu>
    </div>
    
    <!-- 华佗著作与经典药方内容 -->
    <div class="container mx-auto py-16 pl-64">
      <h1 class="text-4xl font-bold text-center mb-12">华佗著作与经典药方</h1>
      
      <section class="mb-16">
        <h2 class="text-3xl font-bold mb-6 border-b pb-2">主要医学贡献</h2>
        <div class="grid md:grid-cols-2 gap-8">
          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-2xl font-bold mb-4 text-green-600">《青囊经》</h3>
            <p class="mb-4">华佗毕生心血所著，记载其外科手术经验和麻醉技术。</p>
            <div class="bg-gray-100 p-4 rounded">
              <h4 class="font-bold mb-2">主要内容：</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>世界最早的麻醉剂"麻沸散"配方</li>
                <li>腹部外科手术技术</li>
                <li>创立的"五禽戏"养生法</li>
                <li>针灸独特技法</li>
              </ul>
            </div>
          </div>
          
          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-2xl font-bold mb-4 text-green-600">外科医术</h3>
            <p class="mb-4">华佗被誉为"外科鼻祖"，开创了多项外科手术先河。</p>
            <div class="bg-gray-100 p-4 rounded">
              <h4 class="font-bold mb-2">主要成就：</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>首创全身麻醉手术</li>
                <li>精通腹腔手术</li>
                <li>创制外科手术器械</li>
                <li>开创骨科手术</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      
      <section>
        <h2 class="text-3xl font-bold mb-6 border-b pb-2">经典药方精选</h2>
        <div class="grid md:grid-cols-3 gap-6">
          <div v-for="(prescription, index) in prescriptions" :key="index" 
               class="bg-white p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow">
            <h3 class="text-xl font-bold mb-3">{{ prescription.name }}</h3>
            <p class="text-sm text-gray-600 mb-2">主治：{{ prescription.indication }}</p>
            <div class="mb-3">
              <h4 class="font-bold text-green-600 mb-1">组成：</h4>
              <p>{{ prescription.composition }}</p>
            </div>
            <div>
              <h4 class="font-bold text-green-600 mb-1">用法：</h4>
              <p>{{ prescription.usage }}</p>
            </div>
          </div>
        </div>
      </section>
      
      <div class="mt-12 text-center">
        <router-link to="keshihua" class="bg-green-500 hover:bg-green-600 text-white py-2 px-6 rounded-lg inline-block">
          返回首页
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, shallowRef, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Histogram, UserFilled, CreditCard, Bowl } from '@element-plus/icons-vue';

export default defineComponent({
  components: { Histogram, UserFilled, CreditCard, Bowl },
  setup() {
    const router = useRouter();
    const Array = [
      {
        id: '1',
        icon: Histogram,
        title: '扁鹊',
        router: 'data',
        Subclass: []
      },
      {
        id: '2',
        icon: UserFilled,
        title: '华佗',
        router: 'userpage',
        Subclass: []
      },
      {
        id: '3',
        icon: CreditCard,
        title: '张仲景',
        router: 'order',
        Subclass: []
      },
      {
        id: '4',
        icon: Bowl,
        title: '皇甫谧',
        router: 'dishes',
        Subclass: []
      },
      {
        id: '5',
        icon: UserFilled,
        title: '葛洪',
        router: '',
        Subclass: [
          {
            id: '5-1',
            title: '人物介绍页面',
            router: 'role',
          }
        ]
      },
      {
        id: '6',
        icon: Histogram,
        title: '数据分析',
        router: 'keshihua',
        Subclass: []
      },
    ];

    const menu = shallowRef(Array);
    const ac_index = ref('2'); // 默认选中华佗菜单项
    const prescriptions = ref([
      {
        name: "华佗麻沸散",
        indication: "外科手术麻醉",
        composition: "曼陀罗花、生草乌、香白芷、当归、川芎、天南星",
        usage: "为细末，热酒调服三钱，不省人事后施术"
      },
      {
        name: "华佗续命汤",
        indication: "中风偏瘫，口眼歪斜",
        composition: "麻黄、桂枝、当归、人参、石膏、干姜、甘草、川芎、杏仁",
        usage: "上九味，以水一斗，煮取四升，温服一升"
      },
      {
        name: "华佗五积散",
        indication: "外感风寒，内伤生冷",
        composition: "白芷、川芎、甘草、茯苓、当归、肉桂、芍药、半夏、陈皮、枳壳、麻黄、苍术、干姜、桔梗、厚朴",
        usage: "上为粗末，每服三钱，加生姜三片，水煎热服"
      },
      {
        name: "华佗黄连丸",
        indication: "三消渴症，消谷善饥",
        composition: "黄连、天花粉、麦门冬、知母、茯苓、当归、生地黄",
        usage: "上为末，炼蜜为丸，如梧桐子大，每服三十丸"
      },
      {
        name: "华佗接骨丹",
        indication: "骨折筋伤，跌打损伤",
        composition: "自然铜、乳香、没药、土鳖虫、血竭、骨碎补、续断",
        usage: "共为细末，每服二钱，温酒调下"
      },
      {
        name: "华佗辟疫散",
        indication: "预防瘟疫，时气传染",
        composition: "苍术、雄黄、丹参、桔梗、白术、川芎、白芷、藿香、降香",
        usage: "为细末，每用少许，熏烧或佩带"
      }
    ]);

    function Select(index, path) {
      localStorage.setItem('menuid', JSON.stringify(index));
    }

    onMounted(() => {
      ac_index.value = JSON.parse(localStorage.getItem('menuid')) || '2';
    });

    // 退出登录
    function signOut() {
      localStorage.clear();
      router.push({ name: 'login' });
    }

    return { menu, ac_index, prescriptions, Select, signOut };
  }
});
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16rem; /* 适配侧边栏宽度 */
}

.sidebar-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.sidebar-cont {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 16rem;
  overflow-y: auto;
  background: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
}
</style>